<template>
  <a-modal title-align="start" title="生产计划" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="1200">
    <a-table :data="dataList" size="mini" :pagination="false" :scroll="{ x: '100%', y: '400px' }" class="table-two-line mt10">
      <template #columns>
        <a-table-column title="采购单号" #cell="{ record }" :width="120">
          {{ $extract(record, 'product.productSku') }}
        </a-table-column>
        <a-table-column title="图片" #cell="{ record }" :width="50">
          <a-image @click="showBigImg(record)" :preview="false" :src="$extract(props.getPicList(record)[0], 'url')" width="40" height="40" />
        </a-table-column>
        <a-table-column title="产品SKU" #cell="{ record }" :width="120">
          {{ $extract(record, 'product.productSku') }}
        </a-table-column>
        <a-table-column title="规格" #cell="{ record }" :width="120">
          {{ $extract(record, 'product.productSku') }}
        </a-table-column>
        <a-table-column :width="160">
          <template #title>
            <a-popover content="这里的生产参数取定制单上的全部定制信息：">
              <p>
                <span class="required">生产参数</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record, rowIndex }">123123 </template>
        </a-table-column>
        <a-table-column :width="160">
          <template #title>
            <a-popover content="取“定制信息”上材质属性值，如果没有材质属性则为空">
              <p>
                <span class="required">材质</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record, rowIndex }">123123 </template>
        </a-table-column>
        <a-table-column title="类型" #cell="{ record }" :width="60">
          {{ $extract(record, 'product.productSku') }}
        </a-table-column>
        <a-table-column :width="160">
          <template #title>
            <a-popover content="这里的客户是指定制单上的“采购方”">
              <p>
                <span class="required">客户</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record, rowIndex }">123123 </template>
        </a-table-column>
        <a-table-column title="定制数量" #cell="{ record }" :width="40">
          {{ $extract(record, 'product.productSku') }}
        </a-table-column>
        <a-table-column :width="160" title="需生产数量">
          <template #cell="{ record, rowIndex }">
            <a-space>
              <a-input placeholder="请输入" v-model="record.amtAvgProcess" />
              <a-button size="small" class="gray-outline" @click="setGloableDate(rowIndex, record, 'amtAvgProcess')">
                <template #icon>
                  <icon-double-down />
                </template>
              </a-button>
            </a-space>
          </template>
        </a-table-column>
        <a-table-column :width="160">
          <template #title>
            <a-popover content="材质净重是指产品出库时扣除石头和链条之外的重量。">
              <p>
                <span class="required">材质净重(g)</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record, rowIndex }">
            <a-space>
              <a-input placeholder="请输入" v-model="record.amtAvgProcess" />
              <a-button size="small" class="gray-outline" @click="setGloableDate(rowIndex, record, 'amtAvgProcess')">
                <template #icon>
                  <icon-double-down />
                </template>
              </a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <template #footer class="modal-footer">
      <a-button @click="showvisible = false">取消</a-button>
      <a-button type="primary" @click="showvisible = false">确定</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { defineComponent, ref, computed } from 'vue'
  let props = defineProps(['modelValue', 'info', 'getfittingName', 'getPicList'])
  let emits = defineEmits(['save', 'update:modelValue'])
  let showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })

  let dataList = ref([])
  let srcList = ref([])
  let visible = ref(false)
  const showBigImg = (item: any) => {
    let arr = props.getPicList(item)
    srcList.value = arr.map((e: any) => e.url)
    visible.value = true
  }

  const setGloableDate = () => {}
</script>

<style lang="less" scoped></style>
